<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>单选框</title>
		<!--框架必需start-->
		<script type="text/javascript" src="../../libs/js/jquery.js"></script>
		<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
		<script type="text/javascript" src="../../libs/js/framework.js"></script>
		<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" id="skin" prePath="../../" />
		<link rel="stylesheet" type="text/css" id="customSkin" />
		<!--框架必需end-->
	</head>

	<body>
		<div class="page_content">	
			<div class="groupTitle"><span>组件说明</span></div>
			<div>
				自定义样式只在支持CSS3的浏览器中生效，例如IE9以上、firefox、chrome，低版本浏览器会显示原生的radio样式。
			</div>

			<div class="groupTitle"><span>1、基本使用（label要放在右侧）</span></div>

			性别：<input type="radio" id="male-1" name="sex-1" value="男" /><label for="male-1" class="hand">男（Male）</label>
			<input type="radio" id="female-1" name="sex-1" value="女" /><label for="female-1" class="hand">女（Female）</label>

			<div class="height_15"></div>

			<div class="groupTitle"><span>2、设置初始值</span></div>

			年龄：<input type="radio" id="lt25-2" name="age-2" value="小于25" /><label for="lt25-2" class="hand">小于25</label>
			<input type="radio" id="gt25-2" name="age-2" value="大于等于25" checked="checked" /><label for="gt25-2" class="hand">大于等于25</label>

			<div class="height_15"></div>

			<div class="groupTitle"><span>3、动态选中某项</span></div>

			性别：<input type="radio" id="male-3" name="sex-3" value="男" /><label for="male-3" class="hand">男（Male）</label>
			<input type="radio" id="female-3" name="sex-3" value="女" /><label for="female-3" class="hand">女（Female）</label>
			<input type="button" value="我是女生" onclick="changeItem()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>4、禁用/启用</span></div>

			年龄：<input type="radio" id="lt25-4" name="age-4" value="小于25" disabled="disabled" /><label for="lt25-4" class="hand">小于25</label>
			<input type="radio" id="gt25-4" name="age-4" value="大于等于25" checked="checked" disabled="disabled" /><label for="gt25-4" class="hand">大于等于25</label>
			<br/>
			<input type="button" value="启用" onclick="enableSelect()" />
			<input type="button" value="禁用" onclick="disableSelect()" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>5、动态生成单选项</span></div>

			<input type="button" value="点击生成单选项" id="testBtn" />

			<div class="height_15"></div>

			<div class="groupTitle"><span>6、获取选中项</span></div>

			性别：<input type="radio" id="male-6" name="sex-6" value="男" checked="checked" /><label for="male-6" class="hand">男（Male）</label>
			<input type="radio" id="female-6" name="sex-6" value="女" /><label for="female-6" class="hand">女（Female）</label>
			<input type="button" value="获取选中项的值" onclick="getRadioValue()" />

			<div class="height_15"></div>
		</div>
			

		

		<script type="text/javascript">
			//改变Radio的值
			function changeItem() {
				$("input:radio[name=sex-3]").eq(1).prop("checked", true);
			}

			//生成单选项
			var counter = 10;
			$(function() {
				$("#testBtn").click(function() {
					var radioStr = "<input type='radio' id='love-" + counter + "' name='hobby' value=" + counter + "/><label class='hand' for='love-" + counter + "'>爱好" + counter + "</label>";
					var $input = $(radioStr);
					$(this).after($input);
					counter++;
				})
			})

			//获取选中项的值
			function getRadioValue() {
				top.Toast('showNoticeToast', $("input:radio[name=sex-6]:checked").val());
				
			}

			//设为不可用
			function disableSelect() {
				$("#lt25-4").attr("disabled", true);
				$("#gt25-4").attr("disabled", true);
			}
			//设为可用
			function enableSelect() {
				$("#lt25-4").attr("disabled", false);
				$("#gt25-4").attr("disabled", false);
			}
			
		</script>

	</body>

</html>